<template>
  <div class="body">
    <div class="login-box">
      <div class="logo">
        <img
          src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
          alt=""
        />
      </div>
      <el-form :model="form" :rules="rules" ref="fff">
        <el-form-item prop="loginName">
          <el-input
            placeholder="请输入账号"
            prefix-icon="icon icon-shouji"
            v-model="form.loginName"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :type="flagType"
            placeholder="请输入密码"
            v-model="form.password"
            autocomplete="off"
            prefix-icon="icon icon-mima"
          >
            <i
              slot="suffix"
              class="icon"
              :class="flag ? 'icon-yanjing' : 'icon-biyan'"
              style="font-size: 18px; position: absolute; right: 12px; top: 5px;"
              @click="getFlag"
            />
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            placeholder="请输入验证码"
            prefix-icon="icon icon-xinxirenzheng"
            v-model="form.code"
            maxlength="4"
          ></el-input>
          <img :src="pic" alt="" @click="captchaFn" v-if="show" />
        </el-form-item>
        <el-form-item class="tc">
          <button @click="login" class="btn">登录</button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login, getImageCode } from '@/api/user'
import { setToken, setName, setId } from '@/utils/storage'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      flag: false,
      flagType: 'password',
      form: {
        loginName: 'admin',
        password: 'admin',
        code: '',
        loginType: '0',
        clientToken: ''
      },
      pic: '',
      show: false,
      rules: {
        loginName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: ['blur', 'change']
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: ['blur', 'change']
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  created () {
    this.captchaFn()
    this.show = true
  },
  methods: {
    getFlag () {
      this.flag = !this.flag
      if (this.flag) {
        this.flagType = 'text'
      } else {
        this.flagType = 'password'
      }
    },
    async login (e) {
      e.preventDefault()
      try {
        // validate()方法，不传函数，就返回一个promise 实例
        const valid = await this.$refs.fff.validate()
        if (valid) {
          const res = await login(this.form)
          if (!res.userName) {
            Message({ message: res.msg, type: 'error' })
            this.captchaFn()
          } else {
            setToken(res.token)
            setId(res.userId)
            setName(res.userName)
            this.$router.push('/index')
          }
        }
      } catch (e) {
        console.error(e)
      }
    },
    captchaFn () {
      this.form.clientToken = String(Math.random())
      getImageCode(this.form.clientToken)
        .then((res) => {
          const a =
            'data:image/png;base64,' +
            btoa(
              new Uint8Array(res).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ''
              )
            )
          this.pic = a
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.body {
  height: 100vh;
  background-image: url(http://likede2-admin.itheima.net/img/background.be4fae7d.png);
  .login-box {
    position: absolute;
    width: 518px;
    height: 388px;
    top: 50%;
    left: 50%;
    margin-top: -194px;
    margin-left: -259px;
    padding: 76px 35px 0;
    background: #fff;
    -webkit-box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    border-radius: 10px;
    .logo {
      position: absolute;
      width: 96px;
      height: 96px;
      top: -46px;
      left: 50%;
      margin-left: -48px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    /deep/ .el-form {
      .el-input__inner {
        height: 50px;
        margin-bottom: 6px;
        padding-left: 38px;
        color: #999;
      }
      .el-input__icon {
        color: #889aa4;
        margin-left: 8px;
        font-size: 18px;
      }
      .btn {
        width: 100%;
        height: 52px;
        background: linear-gradient(262deg, #2e50e1, #6878f0);
        opacity: 0.91;
        border-radius: 8px;
        color: #fff;
        text-shadow: 0 7px 22px #cfcfcf;
        border: none;
      }
      img {
        position: absolute;
        height: 50px;
        width: 130px;
        right: 0;
      }
    }
  }
}
</style>
